<style>
  :host {
    align-items: center;
    background-color: var(--entity-image-background-color);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    margin-inline: 0 12px;
    width: 36px;
  }

  :host([in-side-panel_]) {
    margin-inline: 8px 16px;
  }

  #page-image {
    border-radius: 5px;
    max-height: 100%;
    max-width: 100%;
  }

  :host([is-image-cover_]) #page-image {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
</style>

<template is="dom-if" if="[[imageUrl_]]">
  <img id="page-image" is="cr-auto-img" auto-src="[[imageUrl_.url]]">
</template>
